<template>
  <view class="container">
    <view class="title">德州工程职业学院 教学评价入口</view>
    <!-- 使用 uni-forms 组件 -->
    <uni-forms ref="loginForm" :model="formData" @submit="onSubmit">
      <!-- 用户名表单项 -->
      <uni-forms-item label="用户名" name="username" required>
        <input v-model="formData.username" placeholder="请输入用户名" class="input" />
      </uni-forms-item>
      <!-- 密码表单项 -->
      <uni-forms-item label="密码" name="password" required>
        <input v-model="formData.password" type="password" placeholder="请输入密码" class="input" />
      </uni-forms-item>
      <!-- 图片验证码表单项 -->
      <uni-forms-item label="验证码" name="verifyCode" required>
        <view class="verify-code-row">
          <input v-model="formData.verifyCode" placeholder="请输入验证码" class="input verify-code-input" />
          <image :src="verifyCodeImgUrl" mode="widthFix" @click="refreshVerifyCode" class="verify-code-img" />
        </view>
      </uni-forms-item>
      <!-- 提交按钮 -->
      <view class="example btn_submit">
        <button type="primary" @click="handleLogin()">登陆</button>
      </view>
    </uni-forms>
  </view>
</template>

<script>
import {getCodeImg,login} from '../../api/login';
import { setToken } from '@/../utils/auth';
export default {
  data() {
    return {
      // 表单数据
      formData: {
        username: '',
        password: '',
        verifyCode: '',
        uuid:''
      },
      verifyCodeImgUrl: '',
      correctVerifyCode: ''
    };
  },
  onLoad() {
    this.refreshVerifyCode();
  },
  methods: {
    // 刷新验证码
    refreshVerifyCode() {
      getCodeImg().then(response => {
        console.log(response);
        // 替换图片url地址
        this.verifyCodeImgUrl = "data:image/gif;base64," +response.img;
        this.formData.uuid = response.uuid;
      });
    },
    handleLogin() {
      const { username, password, verifyCode,uuid } = this.formData;
      // 表单验证
      if (!username || !password || !verifyCode) {
        uni.showToast({
          title: '用户名、密码和验证码不能为空',
          icon: 'none'
        });
        return;
      }
      // 请求接口执行登陆
      login(username,password,verifyCode,uuid).then(response => {
        console.log(response);
        // 存储登陆信息
        setToken(response.token);
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });
        // 登录成功后可以进行页面跳转等操作
        uni.reLaunch({
          url: '/pages/eval/index'
        });
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.title {
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
}

.input {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 5px;
  box-sizing: border-box;
  height:40px !important;
}

.verify-code-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.verify-code-input {
  flex: 2;
  margin-right: 10px;
  box-sizing: border-box;
}

.verify-code-img {
  flex: 1;
  height: 38px !important;
  cursor: pointer;
  box-sizing: border-box;
  vertical-align: middle;
  margin-top: -7px !important;
}

.button {
  background-color: #1890ff;
  color: white;
  padding: 5px;
  border-radius: 5px;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}

.uni-forms-item{
  margin-bottom: 15px !important;
}
</style>